<template>
  <div>
    <van-nav-bar title="会员明细">
      <img
        src="~assets/image/arrow_left.png"
        width="20"
        height="20"
        slot="left"
        @click="leftClick"
        alt=""
      />
    </van-nav-bar>

    <div v-if="itemListflag">
      <div
        class="member"
        v-for="item in itemList"
        :key="item.idcard"
        @click="itemListClick(item)"
      >
        <img :src="getImgUrl(grade)" width="50" height="50" alt="" />
        <div class="member-left">
          <p class="member-left-name">{{ itemName(item.realname) }}</p>
          <p>{{ item.gradeName }}</p>
        </div>
        <div class="member-right">
          <p class="member-right-phone">{{ getYinphone(item.phone) }}</p>
          <p>{{ getTime(item.cardManagerTime) }}</p>
        </div>
        <img
          src="~assets/image/icon_cjg_tel.png"
          width="30"
          height="30"
          alt=""
          @click="getPhone(item.phone)"
        />
      </div>
    </div>
    <van-empty v-else>
      <img slot="image" src="~assets/image/img_myspread_new.png" />
      <div slot="default">
        <p>还没有直推用户</p>
        <p>请前去立即推广哦</p>
      </div>
    </van-empty>
  </div>
</template>
<script>
import { queryMemberDetailInfoApi } from "network/ApiServe";
import { getGradeImg } from "network/OemFunction";
export default {
  Name: "MemberDetail",
  data() {
    return {
      memberLevel: [
        { type: "0", name: "所有成员" },
        { type: "1", name: "直推成员" },
      ],
      // grade: this.$route.params.grade,
      // grade: this.mySpreadGrade,
      itemList: [],
      imgurl: [
        { grade: 0, img: require("assets/image/icon_all_wdtg_0.png") },
        { grade: 1, img: require("assets/image/icon_all_wdtg_1.png") },
        { grade: 2, img: require("assets/image/icon_all_wdtg_2.png") },
        { grade: 3, img: require("assets/image/icon_all_wdtg_3.png") },
        { grade: 4, img: require("assets/image/icon_all_wdtg_4.png") },
        { grade: 5, img: require("assets/image/icon_all_wdtg_5.png") },
        { grade: 6, img: require("assets/image/icon_all_wdtg_6.png") },
        { grade: 7, img: require("assets/image/icon_all_wdtg_7.png") },
        { grade: 8, img: require("assets/image/icon_all_wdtg_8.png") },
        { grade: 9, img: require("assets/image/icon_all_wdtg_9.png") },
        { grade: 10, img: require("assets/image/icon_all_wdtg_10.png") },
      ],
    };
  },
  created() {
    this.userId = localStorage.getItem("userId");
    this.token = localStorage.getItem("token");
    this.grade = localStorage.getItem("mySpreadGrade");
  },
  computed: {
    itemListflag() {
      if (this.itemList.length != 0) {
        return true;
      } else {
        return false;
      }
    },
  },
  mounted() {
    this.itemClick();
    // this.itemListflag();
  },
  methods: {
    getImgUrl(grade) {
      if (this.imgurl[grade].grade == grade) {
        return this.imgurl[grade].img;
      }
    },
    leftClick() {
      this.$router.back(-1);
    },
    itemClick() {
      this.getMemberDetailInfo(
        this.token,
        this.grade,
        0,
        this.memberLevel[1].type
      );
    },
    getMemberDetailInfo(token, grade, page, lower_level) {
      queryMemberDetailInfoApi(token, grade, page, lower_level)
        .then((res) => {
          console.log("queryMemberDetailInfoApi:", res);
          if (res.resp_code === "000000") {
            this.itemList = res.result.content;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    itemName(name) {
      return name === null ? "未实名" : name;
    },
    getPhone(phone) {
      window.location.href = "tel://" + phone;
    },
    getYinphone(phone) {
      if (phone != null) {
        return phone.substring(0, 3) + "****" + phone.substring(7);
      }
    },
    getTime(time) {
      if (time) {
        return time.substring(0, 10);
      }
    },
    itemListClick(item) {
      console.log("item", item);
      this.$router.push({
        name: "MemberDetailList",
        params: {
          username: item.realname,
          phone: item.phone,
          grade: item.gradeName,
          address: item.province + "-" + item.city + "-" + item.county,
          uid: item.userid,
        },
      });
    },
  },
};
</script>
<style scoped>
.member {
  display: flex;
  background-color: #fff;
  margin-top: 2px;
  padding: 10px 15px;
  align-items: center;
  font-size: 14px;
}
.member-left {
  flex: 1;
  margin-left: 10px;
}
.member-right {
  margin-right: 10px;
}
.member-left-name {
  margin-bottom: 8px;
  color: red;
}
.member-right-phone {
  margin-bottom: 8px;
  color: #121212;
}
.van-empty {
  margin-top: 35%;
  display: flex;
  justify-items: center;
  text-align: center;
  font-size: 16px;
  color: #999;
  line-height: 25px;
}
</style>